import React, { useState, useLayoutEffect } from 'react';
import { View, Text, StyleSheet, ImageBackground, FlatList, Image } from 'react-native';
import '../global';
import * as api from '../server';
import { AntDesign } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';

const User = () => {
  const [user, setUser] = useState({
    point: 0, public: 0, name: '',
    head: 'https://avatars.githubusercontent.com/u/19384145?v=4&s=120'
  });
  const [collect, setCollect] = useState({ collect: 0 });
  const [mess, setMess] = useState(0);
  useLayoutEffect(() => {
    // 获取分数和发布数量、头像以及名称
    api.getUser('HL1115')
      .then(res => {
        // console.log(res.data);
        setUser({ head: res.data.avatar_url, name: res.data.loginname, point: res.data.score, public: res.data.recent_topics.length });
      })
    // 获取收藏数
    api.getCollect('HL1115')
      .then(res => {
        setCollect({ collect: res.data.length });
      })
    //获取未读消息数
    api.getMessage()
      .then(res => {
        setMess(res.data);
      })
    console.log(user.head);
  }, [])
  return (
    <View style={styles.container}>
      <ImageBackground
        source={require('../assets/HomeworkFive/bg.png')}
        style={{ width: '100%', height: 0.3 * h }}
      >
        <View style={styles.logoBox}>
          <Image
            source={{ uri: user.head }}
            style={styles.logo}
          />
          <Text style={styles.name}>{user.name}</Text>
          <View style={styles.listBox}>
            <FlatList
              contentContainerStyle={styles.userlist}
              data={[
                { num: collect.collect, key: '收藏' },
                { num: user.point, key: '积分' },
                { num: user.public, key: '发布文章' },
              ]}
              renderItem={
                ({ item }) =>
                  <View>
                    <Text style={styles.num}>{item.num}</Text>
                    <Text style={styles.key}>{item.key}</Text>
                  </View>}
            />
          </View>
        </View>
      </ImageBackground>
      <View style={styles.contentBox}>
        <FlatList
          data={[
            {
              key: '最近浏览',
              icon: <Ionicons name="time-outline" size={30} color="#656565" />,
              content: <AntDesign name="right" size={30} color="#656565" />
            },
            {
              key: '消息',
              icon: <MaterialCommunityIcons name="message-processing-outline" size={30} color="#656565" />,
              content: mess
            },
            {
              key: '草稿箱',
              icon: <AntDesign name="inbox" size={30} color="#656565" />,
              content: '11M'
            },
            {
              key: '系统设置',
              icon: <Ionicons name="md-settings-outline" size={30} color="#656565" />,
              content: <AntDesign name="right" size={30} color="#656565" />
            },
          ]}
          renderItem={
            ({ item }) =>
              <View style={styles.conBox}>
                <View style={styles.left}>
                  <Text style={styles.icon}>{item.icon}</Text>
                  <Text style={styles.title}>{item.key}</Text>
                </View>
                <View style={styles.right}>
                  <Text style={styles.content}>{item.content}</Text>
                </View>
              </View>}
        />
      </View>

      <View style={styles.footerBox}>
        <FlatList
          data={[
            {
              key: '服务条款',
              icon: <Ionicons name="time-outline" size={30} color="#656565" />,
              content: <AntDesign name="right" size={30} color="#656565" />
            },
            {
              key: '关于我们',
              icon: <MaterialCommunityIcons name="message-processing-outline" size={30} color="#656565" />,
              content: <AntDesign name="right" size={30} color="#656565" />
            },
          ]}
          renderItem={
            ({ item }) =>
              <View style={styles.conBox}>
                <View style={styles.left}>
                  <Text style={styles.icon}>{item.icon}</Text>
                  <Text style={styles.title}>{item.key}</Text>
                </View>
                <View style={styles.right}>
                  <Text style={styles.content}>{item.content}</Text>
                </View>
              </View>}
        />
      </View>
    </View>

  )
}
const styles = StyleSheet.create({
  container: {
    height: h,
    backgroundColor: '#fff'
  },
  logoBox: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.4)'
  },
  logo: {
    width: 100,
    height: 100,
    marginTop: 0.05 * h,
    marginBottom: 0.01 * h,
  },
  name: {
    color: '#ccc',
    fontSize: 25
  },
  listBox: {
    flex: 1,
    marginTop: 0.03 * h,
  },
  userlist: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
  },
  num: {
    color: '#ccc',
    fontSize: 25
  },
  key: {
    color: '#ccc',
    fontSize: 15
  },
  contentBox: {
    backgroundColor: '#ccc'
  },
  conBox: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    height: 0.08 * h,
    backgroundColor: '#fff',
    marginTop: 2
  },
  title: {
    color: '#555',
    fontSize: 20
  },
  icon: {
    marginLeft: 15,
  },
  title: {
    marginLeft: 10,
    color: '#656565'
  },
  left: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  content: {
    marginRight: 15,
    color: '#656565'
  },
  footerBox: {
    backgroundColor: '#ccc',
    paddingTop: 5,
    paddingBottom: 2
  }
})
export default User;